<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>手风琴</title>
<!-- 引入JQUERY框架 -->
    <script type="text/javascript" src="./jquery-1.7.2.js"></script>
 <!-- 自己写的JS -->
    <script type="text/javascript">
    	$(function(){
    		$('.list').click(function(){
          // $(this).animate({width:'510px'},500).
          // siblings().animate({width:'65px'},500)
              $(this).width(510).siblings().width(65)
                         })
    })
    </script>
    <style type="text/css">
    *{
    	padding:0px;
    }
    .box{
    	width:1000px;
    	height:205px;
    	border:1px solid red ;
    }
    .box .list{
    	list-style:none;
    	float:left;
    	width:65px;
    	height:205px;
    	overflow:hidden;
    }
    </style>
</head>
<body>
    <ul class="box">
        <li class="list"style="width:510px"><img src="./1.jpg" alt=""></li>
    	<li class="list"><img src="./2.jpg" alt=""></li>
    	<li class="list"><img src="./3.jpg" alt=""></li>
    	<li class="list"><img src="./4.jpg" alt=""></li>
    	<li class="list"><img src="./5.jpg" alt=""></li>
    	<li class="list"><img src="./6.jpg" alt=""></li>
    	<li class="list"><img src="./7.jpg" alt=""></li>
    	<li class="list"><img src="./8.jpg" alt=""></li>
    </ul>
	
</body>
</html>